//因为ajax步骤比较多,所以我们对其进行封装

//1.确定一下ajax使用方式是什么

// ajax({
//     url: "http://chst.vip/weather/getWeather", //请求地址
//     method:'get',
//     data:{
//         key:"value"
//     }
// })



//2.定义ajax函数
//封装的含义?1.使用方便 2.可复用性强
function ajax(options) {
    // console.log(options);
    //1.如何变得方便? 用户只传了url,我们我们就需要默认的给method变成get请求
    //设定一个对象,和用户传入的对象进行混合,以用户传入的属性为主
    let defaultOption = {
        url: "", //请求地址
        method: "get",// 请求方式
        data: {},//传递的参数
        async: true,//默认开启异步
        responseType: "json",  //响应数据的类型json || text
        success(res) {//请求成功的回调
            console.log(res);
        },
        error(err) { //失败的回调
            console.log(err);
        }
    }
    //原生写法
    // for (k in options) {
    //     defaultOption[k] = options[k]
    // }

    //es6写法
    defaultOption = Object.assign({}, defaultOption, options) //将传入的options合并到defaultOption里面

    // console.log(defaultOption);

    //解构defaultOption中的属性

    let { url, method, data, async, success, error, responseType } = defaultOption;

    //考虑用于传递method可能大写比如GET POST,我们统一处理成小写

    method = method.toLowerCase();

    //处理data参数
    //把{key:"all",city:"南京"}处理成 "key=all&city=南京"这种格式
    let params = "";
    for (k in data) {
        params += `${k}=${data[k]}&`
    }

    params = params.substr(0, params.length - 1)
    // console.log(params);

    //编写核心逻辑

    //1.实例化xhr

    let xhr;

    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest()
    } else {
        xhr = new ActiveXObject('microsoft.XMLHTTP')
    }

    //设置请求头,post请求的时候,使用MIME类型为x-www-form-urlencoded
    // console.log(xhr.setRequestHeader);
    //get请求的时候 send(null),url需要拼接query参数
    //不是get请求的时候,send(key=val)中需要传入参数,url地址后面不需要拼接参数
    xhr.open(method, url + (method === 'get' ? "?" + params : ""), async)

    if (method === "post") xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded")

    xhr.send(method === "get" ? null : params)
    xhr.onerror = function (err) {
        //ajax请求出错了,回调错误处理函数
        //console.log(err);
        error(err)
    }

    //处理同步请求的数据返回
    if (!async) { //表示同步,async默认是true
        if (xhr.readyState === 4 && xhr.status === 200) {
            let res;
            //直接把结果返回给ajax
            if (responseType === "json") {
                res = JSON.parse(xhr.responseText)

            } else if (responseType === "text") {
                res = xhr.responseText
            }

            return res;//直接返回给ajax函数
        }
    }

    //异步ajax处理
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            let res;
            if (responseType === "json") {
                //将数据处理成对象,并且返回
                res = JSON.parse(xhr.responseText)
            } else if (responseType === "text") {
                res = xhr.responseText
            }
            success(res)
        }
    }
}

